<template>
  <div class="home-container">
    <z-row :gutter="15">
      <z-col :span="10">
        <div style="width:100%;height:100%">
          <box-container :boxTitle="上海地图">
            <scatter-map />
          </box-container>
        </div>
      </z-col>
      <z-col :span="14">
        <div class="echartList">
          <box-container>
            <div class="title">
              <!-- <div @click="onSwitchType(0)">历史&nbsp;</div> -->
              <div :class="{mainTitle: page === 0, subTitle: page === 1}" @click="onSwitchType(0)">历史事件分析</div>
              <div>&nbsp;</div>
              <!-- <div @click="onSwitchType(1)">预测</div> -->
              <div :class="{mainTitle: page === 1, subTitle: page === 0}" @click="onSwitchType(1)">事件预测</div>
            </div>
            <history v-if="page === 0"></history>
            <predict v-if="page === 1"></predict>
          </box-container>
        </div>
      </z-col>
    </z-row>
  </div>
</template>

<script>
import { ZRow, ZCol } from "@UI/components";
import boxContainer from "@/components/boxContainer/index";
import fourAngel from "@/components/fourAngel/index";
import countTo from "@/components/countTo/index";
import {
  cityCount,
  typeCount,
  scatterMap,
  wordChart,
  funnelChart,
  lineChart,
  liquidChart,
} from "./components";
import history from './history'
import predict from './predict'
import useResize from "@/componentApi/useResize.js";

export default {
  name: "homepage",
  components: {
    ZRow,
    ZCol,
    boxContainer,
    cityCount,
    typeCount,
    scatterMap,
    wordChart,
    funnelChart,
    lineChart,
    liquidChart,
    fourAngel,
    countTo,
    history,
    predict,
  },
  setup(props, context) {
    const { year, sum } = useResize();

    return {
      year,
      sum,
    };
  },
  data() {
    return {
      // 历史 0 预测 1
      page: 0,  
    }
  },
  methods: {
    onSwitchType (page) {
      this.page = page;
    }
  },
};
</script>

<style lang="scss" scoped>
.home-container {
  width: 100%;
  height: 100%;
  position: relative;

  .echartList {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;

    .chart-item {
      height: 100%;
      width: 100%;
    }
  }
}
.title{
  display: flex;
  // justify-content: center;
  // text-align: right;
  padding-left: 75%;
  padding-top: 1.5%;
  color: rgb(179, 239, 255);
  .mainTitle {
    font-size: 20px;
    font-weight: bold;
  }
  .subTitle {
    font-size: 16px;
    font-weight: normal;
  }
}
</style>
